<template>
  <view class="RegisterMemberPopup" v-if="flag">
    <Toast ref="Toast" />
    <Loader ref="Loader" />
    <view :class="'container ' + toastAnimate">
      <view class="close CloseBtn" @click="close"></view>
      <view class="title">注册会员</view>
      <view class="input">
        <input type="text" placeholder="请输入姓名" @input="handleName" />
      </view>
      <view class="input">
        <input
          type="number"
          maxlength="11"
          placeholder="请输入手机号"
          @input="handlePhone"
        />
      </view>
      <view class="btn" @click="submit">加入会员</view>
    </view>
  </view>
</template>

<script>
import apiUser from "@/api/user";
import store from "@/store/index";
import check from "@/utils/check";

export default {
  data() {
    return {
      flag: false,
      toastAnimate: "",
      name: "",
      phone: "",
    };
  },
  methods: {
    close() {
      this.toastAnimate = "toastAnimateOut";
      setTimeout(() => {
        this.flag = false;
      }, 250);
    },
    show() {
      this.flag = true;
      this.toastAnimate = "toastAnimate";
      this.name = "";
      this.phone = "";
    },
    handleName(e) {
      this.name = e.detail.value;
    },
    handlePhone(e) {
      this.phone = e.detail.value;
    },
    async submit() {
      if (this.name == "") {
        this.$refs.Toast.show({ title: "抱歉", content: "请输入姓名" });
        return;
      }
      if (this.name.length > 10) {
        this.$refs.Toast.show({ title: "抱歉", content: "姓名不能超过10个字" });
        return;
      }
      if (this.name.length < 2) {
        this.$refs.Toast.show({ title: "抱歉", content: "姓名不能小于2个字" });
        return;
      }
      if (!check.isCnName(this.name)) {
        this.$refs.Toast.show({ title: "抱歉", content: "姓名必需为中文" });
        return;
      }
      if (this.phone == "") {
        this.$refs.Toast.show({ title: "抱歉", content: "请输入手机号" });
        return;
      }
      try {
        this.$refs.Loader.show("更新数据中...");
        await apiUser.registerToMember({ name: this.name, phone: this.phone });
        await store.login(store.state.qr);
        this.$refs.Loader.hide();
        this.close();
      } catch (err) {
        this.$refs.Loader.hide(() => {
          this.$refs.Toast.show({ title: "抱歉", content: err });
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.RegisterMemberPopup {
  font-size: 15px;
  z-index: 99999999999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);

  & > .container {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: 80%;
    border-radius: 30rpx;
    transform: translate(-50%, -50%) scale(0.5);
    background: #fff;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 70rpx;
    box-sizing: border-box;
    & > .close {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      height: 50rpx;
      width: 50rpx;
      background: rgba(0, 0, 0, 0.5);
      z-index: 100000;
    }
    .title {
      position: relative;
      font-size: 32rpx;
      font-weight: bold;
      padding-bottom: 30rpx;
    }
    .input {
      width: 100%;
      border-radius: 10rpx;
      margin-top: 20rpx;
      position: relative;
      border: solid 2rpx #ccc;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
    }
    .btn {
      position: relative;
      width: 50%;
      margin-top: 60rpx;
      line-height: 1;
      padding: 25rpx 0;
      font-size: 30rpx;
      border-radius: 10rpx;
      text-align: center;
      background: var(--Main_Color);
      color: #fff;
    }
  }

  .toastAnimateOut {
    animation: toastAnimateOut 0.3s ease-out forwards;
  }
  .toastAnimate {
    animation: toastAnimate 0.3s ease-out forwards;
  }
  @keyframes toastAnimate {
    0% {
      transform: translate(-50%, -50%) scale(0.7);
      opacity: 0;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.05);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
  @keyframes toastAnimateOut {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(0.7);
      opacity: 0;
    }
  }
}
</style>
